<template>
	<view class="animation-packbox">
		<view class="text-list flex-align-items-center relative">
			<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/newperson-animate-bg.png`" mode=""></image>
			<text class="text relative" v-for="(item, index) in textArr" :key="index" :style="{'animation-delay': item.delayTime}">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
	import store from '@/store';
	
	export default {
		props: {
			title: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				textArr: [],
			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		created() {
			if(!this.title) return;
			let arr = this.title.split('');
			this.textArr = [];
			arr.map((item, index) => {
				this.textArr.push({
					text: item,
					delayTime: (index*180) + 'ms'
				})
			});
		},
		methods: {}
	};
</script>

<style lang="scss">
	@keyframes jump {
		0% {
			transform: translateY(0);
		}
		30% {
			transform: translateY(-10rpx);
		}
		70%, 100% {
			transform: translateY(0);
		}
	}
	.animation-packbox {
		.text-list {
			width: 292rpx;
			height: 44rpx;
			font-size: 28rpx;
			color: #12273B;
			// padding-right: 100rpx;
			justify-content: center;
			left: 0;
			right: 0;
			margin: 0 auto;
			.text {
				animation: jump 2.4s infinite;
			}
		}
	}
</style>
